<!DOCTYPE html>
<html>
<head>
    <title>标签页示例</title>
    <link rel="import" href="../_include/_jx.html?__inline">
    <style>
        .tab-pane {
            padding: 10px;
        }

        .jxtabs-custom {
            margin: 5px;
        }
    </style>
</head>
<body>
<link rel="import" href="../_include/_loading.html?__inline">
<div class="jxform-wrap" style="width: 60%;">
    <div class="jxform-container">
        <div class='jxform-header'>
            <div class='jxform-title'>
                <strong>线性标签示例</strong>
            </div>
        </div>

        <div class="jxtabs-line">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#tab_1_1" data-toggle="tab"> 基本信息 </a>
                </li>
                <li>
                    <a href="#tab_1_2" data-toggle="tab"> 扩展资料 </a>
                </li>
                <li>
                    <a href="#tab_1_3" data-toggle="tab"> 其他信息 </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade in active" id="tab_1_1">
                    长征五号是目前中国运载能力最大的火箭。2016年11月，该火箭成功首飞，但是在第二年7月第二次执行发射任务时失利。之后，有关部门取消了原计划于2017年底由长征五号实施的嫦娥五号月面取样返回任务，进行故障全面调查。航天科技集团就长征五号2018年的复出问题作出了回应，表示其将承担东方红五号卫星的发射任务。
                </div>
                <div class="tab-pane fade" id="tab_1_2">
                    2018年，中国商业航天将可能见证一项新纪录的诞生：发射全国首颗以县域命名的商业遥感卫星。2017年11月，浙江湖州德清县人民政府、湖州莫干山高新区与长春长光卫星技术有限公司联合对外发布，德清一号卫星计划于2018年1月在甘肃酒泉卫星发射升空。
                </div>
                <div class="tab-pane fade" id="tab_1_3">
                    2018年将可能成为中国民营航天迎来里程碑发展的真正元年，标志性事件就是北京零壹空间科技有限公司研制的智能小型运载火箭首次发射。据了解，该公司是目前国内唯一一家掌握固体火箭发动机核心技术的民营企业。2017年12月22日，该公司研制的X系列火箭发动机成功进行了点火试验，为2018年上半年实施首飞计划奠定了坚实基础。
                </div>
            </div>
        </div>

        <div class="jxtabs-line tabs-below">
            <div class="tab-content">
                <div class="tab-pane active" id="tab_2_1">
                    长征五号是目前中国运载能力最大的火箭。2016年11月，该火箭成功首飞，但是在第二年7月第二次执行发射任务时失利。之后，有关部门取消了原计划于2017年底由长征五号实施的嫦娥五号月面取样返回任务，进行故障全面调查。航天科技集团就长征五号2018年的复出问题作出了回应，表示其将承担东方红五号卫星的发射任务。
                </div>
                <div class="tab-pane" id="tab_2_2">
                    2018年，中国商业航天将可能见证一项新纪录的诞生：发射全国首颗以县域命名的商业遥感卫星。2017年11月，浙江湖州德清县人民政府、湖州莫干山高新区与长春长光卫星技术有限公司联合对外发布，德清一号卫星计划于2018年1月在甘肃酒泉卫星发射升空。
                </div>
                <div class="tab-pane" id="tab_2_3">
                    2018年将可能成为中国民营航天迎来里程碑发展的真正元年，标志性事件就是北京零壹空间科技有限公司研制的智能小型运载火箭首次发射。据了解，该公司是目前国内唯一一家掌握固体火箭发动机核心技术的民营企业。2017年12月22日，该公司研制的X系列火箭发动机成功进行了点火试验，为2018年上半年实施首飞计划奠定了坚实基础。
                </div>
            </div>
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#tab_2_1" data-toggle="tab"> 基本信息 </a>
                </li>
                <li>
                    <a href="#tab_2_2" data-toggle="tab"> 扩展资料 </a>
                </li>
                <li>
                    <a href="#tab_2_3" data-toggle="tab"> 其他信息 </a>
                </li>
            </ul>
        </div>

        <div class="jxform-footer tabs-line-footer">
            <a class="btn btn-default">line-default</a> &nbsp;
            <a class="btn btn-primary" data-cls="line-primary">line-primary</a> &nbsp;
            <a class="btn btn-success" data-cls="line-success">line-success</a> &nbsp;
            <a class="btn btn-warning" data-cls="line-warning">line-warning</a> &nbsp;
            <a class="btn btn-info" data-cls="line-info">line-info</a> &nbsp;
            <a class="btn btn-danger" data-cls="line-danger">line-danger</a> &nbsp;
        </div>
    </div>

    <hr>
    <div class="jxform-container">
        <div class='jxform-header'>
            <div class='jxform-title'>
                <strong>卡片标签示例</strong>
            </div>
        </div>

        <div class="jxtabs-custom">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a id="basic" href="#tab_3_1" data-toggle="tab"> 基本信息 </a>
                </li>
                <li>
                    <a id="extend" href="#tab_3_2" data-toggle="tab"> 扩展资料 </a>
                </li>
                <li>
                    <a id="other" href="#tab_3_3" data-toggle="tab"> 其他信息 </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_3_1">
                    长征五号是目前中国运载能力最大的火箭。2016年11月，该火箭成功首飞，但是在第二年7月第二次执行发射任务时失利。之后，有关部门取消了原计划于2017年底由长征五号实施的嫦娥五号月面取样返回任务，进行故障全面调查。航天科技集团就长征五号2018年的复出问题作出了回应，表示其将承担东方红五号卫星的发射任务。
                </div>
                <div class="tab-pane" id="tab_3_2">
                    2018年，中国商业航天将可能见证一项新纪录的诞生：发射全国首颗以县域命名的商业遥感卫星。2017年11月，浙江湖州德清县人民政府、湖州莫干山高新区与长春长光卫星技术有限公司联合对外发布，德清一号卫星计划于2018年1月在甘肃酒泉卫星发射升空。
                </div>
                <div class="tab-pane fade" id="tab_3_3">
                    2018年将可能成为中国民营航天迎来里程碑发展的真正元年，标志性事件就是北京零壹空间科技有限公司研制的智能小型运载火箭首次发射。据了解，该公司是目前国内唯一一家掌握固体火箭发动机核心技术的民营企业。2017年12月22日，该公司研制的X系列火箭发动机成功进行了点火试验，为2018年上半年实施首飞计划奠定了坚实基础。
                </div>
            </div>
        </div>

        <div class="jxtabs-custom tabs-below">
            <div class="tab-content">
                <div class="tab-pane active" id="tab_4_1">
                    长征五号是目前中国运载能力最大的火箭。2016年11月，该火箭成功首飞，但是在第二年7月第二次执行发射任务时失利。之后，有关部门取消了原计划于2017年底由长征五号实施的嫦娥五号月面取样返回任务，进行故障全面调查。航天科技集团就长征五号2018年的复出问题作出了回应，表示其将承担东方红五号卫星的发射任务。
                </div>
                <div class="tab-pane" id="tab_4_2">
                    2018年，中国商业航天将可能见证一项新纪录的诞生：发射全国首颗以县域命名的商业遥感卫星。2017年11月，浙江湖州德清县人民政府、湖州莫干山高新区与长春长光卫星技术有限公司联合对外发布，德清一号卫星计划于2018年1月在甘肃酒泉卫星发射升空。
                </div>
                <div class="tab-pane" id="tab_4_3">
                    2018年将可能成为中国民营航天迎来里程碑发展的真正元年，标志性事件就是北京零壹空间科技有限公司研制的智能小型运载火箭首次发射。据了解，该公司是目前国内唯一一家掌握固体火箭发动机核心技术的民营企业。2017年12月22日，该公司研制的X系列火箭发动机成功进行了点火试验，为2018年上半年实施首飞计划奠定了坚实基础。
                </div>
            </div>
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#tab_4_1" data-toggle="tab"> 基本信息 </a>
                </li>
                <li>
                    <a href="#tab_4_2" data-toggle="tab"> 扩展资料 </a>
                </li>
                <li>
                    <a href="#tab_4_3" data-toggle="tab"> 其他信息 </a>
                </li>
            </ul>
        </div>

        <div class="jxform-footer tabs-custom-footer">
            <a class="btn btn-default" data-target="#extend">显示扩展资料</a> &nbsp;
            <a class="btn btn-default" data-target="#other">显示其他信息</a> &nbsp;
        </div>
    </div>

    <hr>
    <div class="jxtabs-custom nav-justified">
        <ul class="nav nav-tabs nav-justified">
            <li class="active">
                <a href="#tab_5_1" data-toggle="tab"> 基本信息 </a>
            </li>
            <li>
                <a href="#tab_5_2" data-toggle="tab"> 扩展资料 </a>
            </li>
            <li>
                <a href="#tab_5_3" data-toggle="tab"> 其他信息 </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab_5_1">
                长征五号是目前中国运载能力最大的火箭。2016年11月，该火箭成功首飞，但是在第二年7月第二次执行发射任务时失利。之后，有关部门取消了原计划于2017年底由长征五号实施的嫦娥五号月面取样返回任务，进行故障全面调查。航天科技集团就长征五号2018年的复出问题作出了回应，表示其将承担东方红五号卫星的发射任务。
            </div>
            <div class="tab-pane" id="tab_5_2">
                2018年，中国商业航天将可能见证一项新纪录的诞生：发射全国首颗以县域命名的商业遥感卫星。2017年11月，浙江湖州德清县人民政府、湖州莫干山高新区与长春长光卫星技术有限公司联合对外发布，德清一号卫星计划于2018年1月在甘肃酒泉卫星发射升空。
            </div>
            <div class="tab-pane" id="tab_5_3">
                2018年将可能成为中国民营航天迎来里程碑发展的真正元年，标志性事件就是北京零壹空间科技有限公司研制的智能小型运载火箭首次发射。据了解，该公司是目前国内唯一一家掌握固体火箭发动机核心技术的民营企业。2017年12月22日，该公司研制的X系列火箭发动机成功进行了点火试验，为2018年上半年实施首飞计划奠定了坚实基础。
            </div>
        </div>
    </div>

</div>
<script>
    $('.tabs-line-footer a').on('click', function () {
        var $target = $('.jxtabs-line,.jxtabs-custom');
        var cls = $target.data('cls');
        if (cls) {
            $target.removeClass(cls);
        }
        cls = $(this).data('cls');
        if (cls) {
            $target.addClass(cls);
        }
        $target.data('cls', cls);
    });

    $('.tabs-custom-footer a').on('click', function () {
        var target = $(this).data('target');
        $(target).tab('show');
    });

    $('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
        console.log('hide.bs.tab'+this.hash);
    }).on('show.bs.tab', function (e) {
        console.log('show.bs.tab'+this.hash);
    }).on('hidden.bs.tab', function (e) {
        console.log('hidden.bs.tab'+this.hash);
    }).on('shown.bs.tab', function (e) {
        console.log('shown.bs.tab'+this.hash);
    });

</script>
</body>
</html>
